Learning Objectives

After completing this lesson, you’ll be able to:

• Create a webpage with many FME Flow Apps.
• Customize this webpage.

Introduction

FME Flow has the ability to create Gallery Apps (Galleries). Galleries are landing pages for a collection of Flow Apps and URLs. This enables users to access multiple apps from a single organized page. Like Workspace Apps, Gallery Apps are easy to build and customize as they require no prior knowledge of HTML, JavaScript, or CSS. In this lesson, we’ll walk you through the Gallery App parameters to show you how easy it is to build a Gallery similar to the one shown below:

Building a Gallery App

Start by logging into FME Flow and navigating to the Flow Apps > Create Gallery App page.

Parameters

Now let’s take a look at the parameters to get an understanding of the elements that make up the Gallery. All of the parameters are optional except Name, so feel free to pick and choose which elements you want to make use of in your Gallery.

1. Name (Required): This will become part of the URL for the Gallery App (i.e. <servername>/fmeserver/apps/<name>) and will also be used within FME Flow for managing your Galleries. Gallery names cannot be duplicated.

2. Title: This sets both the browser page title and the large body of text near the top of the page.

3. Description: Text below the title that provides users with additional information about the Gallery.

4. Links: There are two types of links: Flow Apps and URLs. Selecting Flow App allows you to link to an existing Workspace App. Alternatively, you can choose the URL type to link to an external URL, for example, https://community.safe.com/ Links will always open in a new tab.

4.1. Label: The descriptive name of the app/URL you are linking to. It appears below the link image (if used).

4.2. Tooltip: A tooltip will appear when users hover their cursor over the link. This is a good place to provide additional information or a brief description of the link so users can learn more about the link before opening it.

4.3. Image: Graphic representation to help users visually identify links. Use a square icon that fills most of the area for best results. Note: Take your Gallery to the next level by using a PNG with a transparent background.

5. Require Authentication: Gallery Apps can be secured or open to the public. Enabling this will require users to provide credentials to access the Gallery App. Here you can specify which users and/or roles are allowed to access the Gallery. 

Authentication

If a workspace app requires authentication, the user will be prompted to log in when accessing the app via its link in the gallery.

FME Flow also supports a dynamic Gallery App that will show a filtered list of Workspace App links based on the user's access permissions. This is only available for Gallery Apps that require authentication and the filter only applies to Flow App links (Workspace and Gallery Apps) and not generic URLs.

Customize

Similar to Workspace Apps, Gallery Apps give you the flexibility to customize the appearance. This is a great way to make Galleries look and feel like they were custom-built just for your organization. Check out the before and after customization image below to get an idea of what’s possible:

6. Browser Icon: This is the little icon you see in the browser tab to the left of the page title. It’s a subtle detail that makes your Gallery look more official.

7. Heading Banner Image/Background Color: While you can set both of these parameters, your banner will have a more uniform look if you use one or the other. The Banner Image and Background Color occupy the top of the page, spanning the entire width. You can get great results using a rectangular image or simply setting the background colour. By default, the background colour matches the rest of the page (colour: #f5f6fa), but you can change this using the colour picker or an HTML colour code to match your organization's brand colour.

The Heading Banner Image will always appear on top of the Background Color, so removing the default colour value is unnecessary. Note, if you intend to use a heading Logo Image, avoid using an image with a busy pattern as it may distract from the logo.

8. Heading Logo Image: Typically, this is where you will place your organization's logo if it isn’t already in the Banner Image. Again, for best results, use a PNG with a transparent background to make the logo really pop on the page. If you don’t have an image with a transparent background, try setting the Heading Background Color to the same colour as the background in the image to blend it in with the rest of the banner.

9. Footer Text: Need to include any other important info? The footer is a great place to add additional information like who to contact if something goes wrong, a motivational quote, or your organization's mission statement.

10. Footer Logo: Small logo that is either centred at the bottom of the page or on top of the Footer Banner (if used).

11. Footer Banner: Spans the width of the page and marks the bottom of the gallery app.